<template>
    <div>
    <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
  <el-checkbox label="" :indeterminate="isIndeterminate" @change="checkAll()" v-model="checked">全选</el-checkbox>
  <div style="margin: 15px 0;">
  <el-checkbox-group v-model="checkCities" @change="handleCheckedCitiesChange" :min="1" :max="3">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
  </div>

     </div>
</template>
<script>
const cityOptions=['上海','北京','广州','深圳']
export default {
  data() {
    return {
      checked: false,
      cities: cityOptions,
      checkCities: ['上海','北京'],
      isIndeterminate: true
    }
  },
  methods: {
      checkAll: function(){
          if(this.checked){
            this.checkCities=this.cities;
            this.isIndeterminate = false;
          }else{
             this.checkCities=[]
          }
         
      },
      handleCheckedCitiesChange: function(){
          if(this.checkCities.length==this.cities.length){
              this.checked=true;
              this.isIndeterminate=false;
          }else{
              this.checked=false;
             this.isIndeterminate=true;
          }
      }
  }
};
</script>
<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>